<template>
  <div class="system">
    <div class="system-sidebar">
      <Menu theme="dark" width="200px">
        <MenuItem name="org" to="/system/org">
          <Icon type="ios-paper"/>
          组织管理
        </MenuItem>
        <MenuItem name="user" to="/system/user">
          <Icon type="ios-paper"/>
          用户管理
        </MenuItem>
      </Menu>
    </div>
    <div class="system-detailed">
      <span id="BackTop"></span>
      <router-view></router-view>
      <BackTop style="display: block">
        <a href="#BackTop">BackTop</a>
      </BackTop>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'System'
  }
</script>

<style scoped>
  .system {
    width: 100%;
    height: 100%;
    border-bottom: #cccccc 1px solid;
    float: left;
  }

  .system-sidebar {
    width: 200px;
    height: 100%;
    background-color: #515a6e;
    float: left;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .system-detailed {
    padding: 5px;
    width: calc(100% - 200px);
    height: 100%;
    float: left;
    overflow-x: hidden;
    overflow-y: auto;
  }


  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
    border-left: #5cadff 5px solid;
    border-right: none;
    color: #fff;
    background: #6f83a2 !important;
  }

  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
    border-left: #2d8cf0 5px solid;
    background: #6f83a2 !important;
  }
</style>